<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        TIP
        CSS mask 属性为mask-image、 mask-position 、mask-size 、 mask-repeat、 mask-clip 、 mask-origin 、mask-composit 这些属性的简写。
        
        语法
        mask: mask-image mask-position/mask-size mask-repeat mask-clip mask-origin mask-composit;
    -->

    <style>
        .layout {
          display: inline-block;
          background-color: skyblue;
        }
        .mask {
          width: 300px;
          height: 200px;
          background-image: url("./images/star.png");
          mask: url("/src/img/css3/star.png") no-repeat center/100px 100px;
        }
      </style>
      
      <div class="layout">
        <div class="mask">
          <img src="/src/img/css3/ms.jpg" alt="" />
        </div>
      </div>
</body>
</html>